<div id="{{config.name}}" class="form-element dynamic-field form-select {{config.inlineLabel ? 'inline-label' : 'not'}}" [formGroup]="group" [ngClass]="fieldShow" [class.has-tooltip]="config.tooltip" [hidden]="config.isHidden">

  <div class="label-container">
    <label class="label input-select">
      {{config.placeholder | translate}}
      <span *ngIf="config.required">*</span>
    </label>
    <tooltip *ngIf="config.tooltip" [header]="config.placeholder" [message]="config.tooltip"></tooltip>
  </div>

  <ng-container *ngIf="config.inlineLabel">
    <div class="label half-width">{{config.inlineLabel}}</div>
  </ng-container>
  <mat-form-field [ngClass]="{'full-width': !config.inlineLabel,'half-width': config.inlineLabel}" value="fromFormField" #field>
      <mat-spinner
        diameter='40'
        class="form-select-spinner"
        id="{{config.name}}_form-select-spinner"
        *ngIf="config.isLoading">
      </mat-spinner>
    <mat-select 
      #selectTrigger
      [value]="formValue"
      [formControlName]="config.name" 
      [multiple]="config.multiple" 
      [required]="config.required" 
      (selectionChange)="onChangeOption($event)"
      ix-auto ix-auto-type="select" ix-auto-identifier="{{config.placeholder}}">

     
      <mat-select-trigger *ngIf="config.multiple">
        <span *ngFor="let value of customTriggerValue ; last as isLast">
            {{ value }}{{ isLast ? '' : ', ' }}
        </span>
      </mat-select-trigger>
     
      <!--
        <div class="mat-option" (click)="onToggleSelectAll()">
          <span *ngIf="config.multiple">
            <mat-icon *ngIf="allSelected" class="fn-checked">check_circle</mat-icon>
            <mat-icon *ngIf="!allSelected" class="fn-unchecked">remove</mat-icon>
          </span>
        Select All
      </div>
      -->

      <div *ngIf="formReady">
        <mat-selection-list>
        <ng-container *ngFor="let option of config.options; let i=index">
          <!-- if disabled -->
          <mat-option *ngIf="option.disable && !option.hiddenFromDisplay" [value]="option.value" disabled style="opacity:0.5"
            ix-auto
            ix-auto-type="option"
            ix-auto-identifier="{{config.placeholder}}_{{option.label}}">
              <span *ngIf="config.multiple">
                <mat-icon *ngIf="selectStates[i]" class="fn-checked">check_circle</mat-icon>
                <mat-icon *ngIf="!selectStates[i]" class="fn-unchecked">remove</mat-icon>
              </span>
              {{ option.label | translate }}
          </mat-option>

          <!-- else -->
          <mat-option *ngIf="!option?.disable" [value]="option.value" (click)="onToggleSelect(option, i)"
            ix-auto
            ix-auto-type="option"
            ix-auto-identifier="{{config.placeholder}}_{{option.label}}">
              <span *ngIf="config.multiple">
                <mat-icon *ngIf="selectStates[i]" class="fn-checked">check_circle</mat-icon>
                <mat-icon *ngIf="!selectStates[i]" class="fn-unchecked">remove</mat-icon>
              </span>
              {{ option.label | translate }}
              </mat-option>

        </ng-container>
        </mat-selection-list>
      </div>

      <div *ngIf="!formReady || config.options.length == 0">
        <ng-container>
          <mat-option disabled style="opacity:0.5"
            ix-auto
            ix-auto-type="option"
            ix-auto-identifier="{{config.placeholder}}_zeroState">
            {{config.zeroStateMessage ? config.zeroStateMessage : '--'}}
          </mat-option>
        </ng-container>
      </div>
    </mat-select>


  </mat-form-field>
  <div class="margin-for-error">
    <form-errors [control]="group.controls[config.name]" [config]="config"></form-errors>
    <mat-error *ngIf="config['hasErrors']"><div [innerHTML]="config['errors']"></div></mat-error>
    <mat-error *ngIf="config.warnings"><div [innerHTML]="config.warnings | translate"></div></mat-error>    
  </div>
</div>
